<template>
  <div>
    <el-row class="back-head" type="flex" align="middle">
      <span @click="backPath()" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
      <span class="primary">创建跑腿优惠券</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="left"  size="small">
        <el-row class="head" type="flex" align="middle">优惠券信息</el-row>
        <div class="item">
          <el-form-item v-if="$store.state.showAgent" label="所属区域" prop="agentid" :rules="[{ required: true, message: '请选择区域', trigger: 'blur' }]">
            <el-select v-model="params.agentid" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item  label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>

          <el-form-item label="领取范围" required :style="params.diyPrice==3?'margin-bottom:0':''">
            <el-row type="flex">
              <el-select v-model="params.redusertype" placeholder="请选择领取方式" clearable>
                <el-option label="全部用户" value="0" />
                <el-option label="随机用户" value="2" />
                <el-option label="自定义" value="1" />>
              </el-select>
              <el-row type="flex" v-if="params.redusertype==1" style="margin-left: 5px">
                <span style="line-height: 32px;"> ,最近</span>
                <el-form-item prop="redday" :rules="[{ required: true, message: '请输入天数' }]">
                  <el-input-number style="width: 160px;margin:0 5px;" :min='1' :max='999' :precision='0' v-model="params.redday" />
                </el-form-item>
                <span>天未使用的用户</span>
              </el-row>
            </el-row>
          </el-form-item>
          <el-form-item label="数量限制" required style="margin-bottom: ">
            <el-row type="flex">
              <span style="margin-right: 5px;">限</span>
              <el-select style="" v-model="params.redlimittype" placeholder="请选择">
                <el-option label="每天数量" value="0" />
                <el-option label="总数量" value="1" />
              </el-select>
              <span> ，</span>
              <el-form-item prop="rednum" :rules="[{ required: true, message: '请输入优惠券数量' }]">
                <el-input-number style="width: 200px;margin: 0 5px;" :min='1' :max='9999999' :precision='0' v-model="params.rednum" />
              </el-form-item>
              <span style="line-height: 32px;margin-left: 5px;">个</span>
            </el-row>
          </el-form-item>

          <el-form-item label="领取限制" required>
            <el-select v-model="params.redpersonlimittype" placeholder="请选择">
              <el-option label="每人1张" value="0" />
              <el-option label="每人每天1张" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券金额" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-select v-model="diyPrice" placeholder="请选择">
                <el-option label="固定金额" value="1" />
                <el-option label="随机金额" value="2" />
              </el-select>
              <span style='margin: 0 5px'>,</span>
              <el-form-item prop="randomMin" v-if="diyPrice == 1" :rules="[{ required: true, message: '请输入金额'}]">
                <el-input-number :min='0' :max='9999999' :precision='2' v-model="params.randomMin" /> {{comConfig.unit}}
              </el-form-item>
              <el-row type="flex" v-if="diyPrice ==2">
                <span style="margin:0 5px;">随机金额最少</span>
                <el-form-item prop="randomMin" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMin" :min='0' :max='params.randomMax?params.randomMax:"9999"' :precision='2' />
                </el-form-item>
                <span style="margin:0 5px;">{{comConfig.unit}},最多</span>
                <el-form-item prop="randomMax" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMax" :min='params.randomMin?params.randomMin:0' :max='9999' :precision='2' />
                </el-form-item>
                <span style="margin-left:5px;">{{comConfig.unit}}</span>
              </el-row>
            </el-row>
          </el-form-item>
          <el-form-item prop='redvalidday' label='红包有效期' :rules="[{ required: true, message: '请输入天数'}]">
            <el-input-number :min='1' :max='9999' style="width: 200px;margin: 0 5px;" v-model="params.redvalidday" placeholder="请输入有效天数" />天
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">优惠券生效配置</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请起止日期', trigger: 'blur' }]">
            <pt-date-picker style="width:500px;" v-model="params.startTimeToendTime" :disabledDate ="time => time.getTime() <= (Date.now() - 3600 * 1000 * 24)" />
          </el-form-item>
          <el-form-item label="使用条件" prop="fulls" :rules="[{ required: true, message: '请输入金额' }]">
            消费满 <el-input-number v-model="params.fulls" :min='0' :max='9999' :precision='2' /> 可使用
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">同享设置</el-row>
        <div class="item">
          <el-form-item label="是否同享" prop="name"><el-switch v-model="params.shared" /></el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        diyPrice: '1',  //优惠券金额方式
        params: {
          agentid: '',  //商家id
          name: '', //活动名称
          ptype: '6', //商户红包
          redusertype: '0', //领取范围
          redday:'',  //x天为使用
          redlimittype: '0', //数量限制方式
          rednum:'', //限制红包数量
          redpersonlimittype: '0',  //领取限制
          randomMin:'',//固定金额
          randomMax:'', //固定金额
          redvalidday:'', //红包有效期
          fulls:'',//满返红包
          startTimeToendTime: '',//起止时间
          shared: false //是否同享受
        }
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.params.agentid = val[0].id
          }
        },
        deep: true
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.diyPrice == '1') {
              params.redamount = params.randomMin
            }
            else if (this.diyPrice == '2') {
              params.redamount = `${params.randomMin},${params.randomMax}`
            }
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            delete params.randomMin
            delete params.randomMax
            this.issubmitLoading = true
            this.$http.post('/server/paotui/activity/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '添加区域优惠券活动成功'})
                this.$router.push({path: '/main/fwactivity/set'})
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入或未填写的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      backPath() {
        this.$router.replace({path: '/main/fwactivity/add'})
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.params.agentid = this.restaurants[0].id
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-aglenbox;
  }

  .main .head {
    background: $c-active-aglenbox;
  }

  @import './css/actives.scss';
</style>
